<template>
  <div>
    <myhead
      :title="'城市选择' + ($route.query.city ? ' - ' + $route.query.city : '')"
      :back="true"
    ></myhead>
    <div>
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入城市名称"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <van-index-bar v-if="!searchFlag">
      <div v-for="(l, i) in list" :key="i">
        <van-index-anchor :index="l" />
        <van-cell
          :title="item.name"
          @click="chooseCity(item)"
          v-for="(item, k) in cityList.filter(
            (val) => val.pinyin.indexOf(l.toLowerCase()) == '0'
          )"
          :key="k"
        />
      </div>
    </van-index-bar>
    <div v-else>
      <van-cell-group v-if="searchList.length > 0">
        <van-cell
          @click="chooseCity(l)"
          v-for="(l, i) in searchList"
          :key="i"
          :title="l.name"
        />
      </van-cell-group>
      <p v-else class="nodata">没有匹配到对应的城市</p>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      keyword: "",
      searchList: [],
    //   cityList: [],
      searchFlag: false,
      list: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  methods: {
    onSearch(value) {
      
      this.searchFlag = true;
      this.searchList = this.cityList.filter(
        (item) =>
          item.pinyin.indexOf(value) != -1 || item.name.indexOf(value) != -1
      ); 
      
    },
    onCancel() {
      this.searchFlag = false;
    },

    chooseCity(city) {
      this.changeCity(city);
      this.$router.go(-1);
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.city) {
      next();
    } else {
      this.$toast("请先选择城市");
      next(false);
    }
  },
  mounted() {
    this.$ajax
      .getmaizuo(
        {},
        {
          "X-Host": "mall.film-ticket.city.list",
        }
      )
      .then((res) => {
        this.changecityList(res.data.data.cities);
      });
  },
};
</script>


<style lang="scss" scoped>
.nodata {
  margin: 100px auto 0;
  text-align: center;
  color: #777;
  font-size: 14px;
}
</style>
